<template>
  <div class="visitor-toVisit">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">建议人姓名:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.adviseName" placeholder="请输入投诉人姓名" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">联系电话:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.adviseMobile" placeholder="请输入联系电话" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">回复状态:</div>
        <div class="input-item">
          <a-select ref="select" allowClear v-model="queryParam.status" placeholder="请选择回复状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">待回复</a-select-option>
            <a-select-option value="2">已回复</a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">建议时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">回复时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange2"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>

      <div class="btn-wrap">
        <a-button
          class="searchBtn"
          @click="
            searchQuery(queryParam.startTime, queryParam.endTime, queryParam.replyStartTime, queryParam.replyEndTime)
          "
          type="primary"
        >
          搜索
        </a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
      </div>
    </div>

    <div>
      <a-table
        rowKey="id"
        class="tableList"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <template v-slot:status="records">
          <span v-if="records.status == 1">待回复</span>
          <span v-else-if="records.status == 2">已回复</span>
        </template>
        <template #replyTime="record">
          <span v-if="record.replyTime">{{ record.replyTime }}</span>
          <span v-else> ----</span>
        </template>
        <template v-slot:action="records">
          <span class="operation deatil-color" @click="detailHandle(records)">详情 </span>
        </template>
      </a-table>
    </div>
    <detail-modal ref="detailModal"></detail-modal>
    <reply-detail-modal ref="replyDetailModal" @success="searchQuery"></reply-detail-modal>
  </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState } from 'vuex'
import detailModal from './modules/detailModal'
import replyDetailModal from './modules/replyDetailModal'
import startEndTime from '@/components/startEndTime'
export default {
  name: 'visitor-toVisit',
  components: { detailModal, replyDetailModal, startEndTime },
  mixins: [JeecgListMixin],
  computed: {
    ...mapState({
      isPoliceAgencyId: (state) => state.user.isPoliceAgencyId,
    }),
  },
  watch: {
    isPoliceAgencyId(v) {
      this.queryParam.policeAgencyId = v.id ? v.id : ''
      this.searchQuery()
    },
  },
  data() {
    return {
      url: {
        list: '/common/advise_message/page',
        tree: true,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '建议内容',
          dataIndex: 'adviseContent',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '建议人姓名',
          dataIndex: 'adviseName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '联系电话',
          dataIndex: 'adviseMobile',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '提交时间',
          dataIndex: 'adviseTime',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '回复状态',
          scopedSlots: { customRender: 'status' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '回复时间',
          scopedSlots: { customRender: 'replyTime' },
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
    }
  },
  mounted() {},

  methods: {
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.startTime = null
        this.queryParam.endTime = null
      }
    },

    timeChange2(v, index) {
      if (index == 1) {
        this.queryParam.replyStartTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.replyEndTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.replyStartTime = null
        this.queryParam.replyEndTime = null
      }
    },

    searchQuery(startTime, endTime, replyStartTime, replyEndTime) {
      if ((startTime && !endTime) || (!startTime && endTime)) {
        this.$message.error('开始时间结束时间必须同时选择')
        return
      }
      if ((replyStartTime && !replyEndTime) || (!replyStartTime && replyEndTime)) {
        this.$message.error('回复开始时间和回复结束时间必须同时选择')
        return
      }
      this.loadData(1)
      this.selectedRowKeys = []
      this.selectionRows = []
    },

    detailHandle(records) {
      if (records.status == 1) {
        this.$refs.replyDetailModal.show(records)
      } else if (records.status == 2) {
        this.$refs.detailModal.show(records)
      }
    },
  },
}
</script>
